<template>

  <div id="app"><!-- 从笔记复制过来的 -->
    <router-view/>
    <!-- <van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button> -->
  <!-- 第三步  设置出口 -->
  <router-view></router-view>
  </div>
</template>

<script>

import request from '@/utils/request'// 因为要使用request这个axios方法获取后端数据  所以要引入
export default {
  // 因为要执行异步请求 所以要在created钩子前面使用async和await函数

  async created () { // reques包装的axios返回的是一个Promise实例 所以要await一下
    const res = await request.post('/user/login', { // post方法传入2个参数
    // 第一个是请求地址 第二个是以data的方式的请求参数
      username: 'harry',
      password: 'guishi'
    })
    console.log(res)
  }
}
// 按需引入  就是需要什么 找到对应的文档 按照指示引入什么
</script>

<style>
/* 第一部分

/* 第一步 复制笔记的template的内容 */
/* 第二步 导入一级路由和二级路由的8个vue组件 */
/* 第三步 在src目录下新建一个api文件夹  作用：存放接口储存的地方 */
/*        在src目录下新建一个utils文件夹  作用 ：存放模块的地方 或者说自己封装的方法 */
/* 第四步  把一个图面放在assets文件夹里面  重新命名为logo

*/

/* 第二部分*/

/* 第一步 去vant官网查询如何下载vant包   我们yarn add vant@latest-v2 就可以下载vue2的vant包了 */
/* 第二步 在main.js中直接导入所有的组件 */
/*  测试 ：选几个有颜色的按钮试一下  */
/* 但是全部导入会导致体积过大 用户体验不太好  所以我们选择按需导入 */
/* 第三步 查询官网文档发现自动按需引入要下载一个包 babel-plugin-import -D  我们下载这个 */
/* 第四步 在 babel.config.js中查阅官网文档 添加plugins这个配置 */
/* 第五步 因为使用了自动按需引入 所以我们就不能用全局引入了 会报错 回到main.js里面吧之前引入的全局给注释掉 */
/* 测试：这时候因为全局引入的代码被注释掉了  所以主页的按钮也失去了该有的样式   */
/*       这时候我们找到文档里的按钮页面 根据指示把按钮导入到main.js中 */
/* 第六步 引入vw适配包 就是浏览器适配的意思  下载这个包 */
/*       在根目录下创建一个 postcss.config.js配置文件*/

/* 第七步 下载axios第三方包 用来请求后端接口 */
/*        封装一个axios实例 因为项目可能很大 有很多个请求 axios.create这个方法可以创建axios实例 */
/*        新建一个utils文件夹在根目录 在连写一个 request.js */
</style>
